<template>
  <div class="layout-config-drawer">
    <el-drawer
      :model-value="configStore.layout.showDrawer"
      title="配置"
      size="310px"
      @close="onCloseDrawer"
    >
      <el-scrollbar class="layout-mode-style-scrollbar">
        <el-form ref="formRef" :model="configStore.layout">
          <div class="layout-mode-styles-box">
            <el-divider border-style="dashed">配置</el-divider>
            <div class="layout-config-global">
              <el-form-item size="large" label="暗黑模式">
                <DarkSwitch @click="toggleDark()" />
              </el-form-item>
              <el-form-item label="后台页面切换动画">
                <el-select
                  @change="onCommitState($event, 'mainAnimation')"
                  :model-value="configStore.layout.mainAnimation"
                  placeholder="请选择"
                >
                  <el-option
                    label="animate__animated animate__bounceInRight"
                    value="animate__animated animate__bounceInRight"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__rubberBand"
                    value="animate__animated animate__rubberBand"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__bounceInDown"
                    value="animate__animated animate__bounceInDown"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__jackInTheBox"
                    value="animate__animated animate__jackInTheBox"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__lightSpeedInRight"
                    value="animate__animated animate__lightSpeedInRight"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__backInLeft"
                    value="animate__animated animate__backInLeft"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__rotateInDownRight"
                    value="animate__animated animate__rotateInDownRight"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__bounceInLeft"
                    value="animate__animated animate__bounceInLeft"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__backInUp"
                    value="animate__animated animate__backInUp"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__bounceInDown"
                    value="animate__animated animate__bounceInDown"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__fadeInDownBig"
                    value="animate__animated animate__fadeInDownBig"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__fadeInUpBig"
                    value="animate__animated animate__fadeInUpBig"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__fadeIn"
                    value="animate__animated animate__fadeIn"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__fadeInBottomRight"
                    value="animate__animated animate__fadeInBottomRight"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__fadeInBottomLeft"
                    value="animate__animated animate__fadeInBottomLeft"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__flipInX"
                    value="animate__animated animate__flipInX"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__flipInY"
                    value="animate__animated animate__flipInY"
                  ></el-option>
                  <el-option
                    label="animate__animated animate__rollIn 8"
                    value="animate__animated animate__rollIn 8"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-divider border-style="dashed">侧边栏</el-divider>
            <div class="layout-config-aside">
              <el-form-item label="侧边栏背景色">
                <el-color-picker
                  @change="onCommitColorState($event, 'menuBackground')"
                  :model-value="configStore.getColorVal('menuBackground')"
                />
              </el-form-item>
              <el-form-item label="侧边栏文字颜色">
                <el-color-picker
                  @change="onCommitColorState($event, 'menuColor')"
                  :model-value="configStore.getColorVal('menuColor')"
                />
              </el-form-item>
              <el-form-item label="侧边菜单激活项背景色">
                <el-color-picker
                  @change="onCommitColorState($event, 'menuActiveBackground')"
                  :model-value="configStore.getColorVal('menuActiveBackground')"
                />
              </el-form-item>
              <el-form-item label="侧边菜单激活项文字色">
                <el-color-picker
                  @change="onCommitColorState($event, 'menuActiveColor')"
                  :model-value="configStore.getColorVal('menuActiveColor')"
                />
              </el-form-item>
              <el-form-item label="显示侧边菜单顶栏(LOGO栏)">
                <el-switch
                  @change="onCommitState($event, 'menuShowTopBar')"
                  :model-value="configStore.layout.menuShowTopBar"
                ></el-switch>
              </el-form-item>
              <el-form-item label="侧边菜单顶栏背景色">
                <el-color-picker
                  @change="onCommitColorState($event, 'menuTopBarBackground')"
                  :model-value="configStore.getColorVal('menuTopBarBackground')"
                />
              </el-form-item>
              <!-- <el-form-item
                :label="t('layouts.Side menu width (when expanded)')"
              >
                <el-input
                  @input="onCommitState($event, 'menuWidth')"
                  type="number"
                  :step="10"
                  :model-value="configStore.layout.menuWidth"
                >
                  <template #append>px</template>
                </el-input>
              </el-form-item> -->
              <!-- <el-form-item :label="t('layouts.Side menu default icon')">
                <IconSelector
                  @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"
                  :model-value="configStore.layout.menuDefaultIcon"
                />
              </el-form-item> -->
              <!-- <el-form-item :label="t('layouts.Side menu horizontal collapse')">
                <el-switch
                  @change="onCommitState($event, 'menuCollapse')"
                  :model-value="configStore.layout.menuCollapse"
                ></el-switch>
              </el-form-item>
              <el-form-item :label="t('layouts.Side menu accordion')">
                <el-switch
                  @change="onCommitState($event, 'menuUniqueOpened')"
                  :model-value="configStore.layout.menuUniqueOpened"
                ></el-switch>
              </el-form-item> -->
            </div>

            <el-divider border-style="dashed">顶栏</el-divider>
            <div class="layout-config-aside">
              <el-form-item label="顶栏背景色">
                <el-color-picker
                  @change="onCommitColorState($event, 'headerBarBackground')"
                  :model-value="configStore.getColorVal('headerBarBackground')"
                />
              </el-form-item>
              <el-form-item label="顶栏文字色">
                <el-color-picker
                  @change="onCommitColorState($event, 'headerBarTabColor')"
                  :model-value="configStore.getColorVal('headerBarTabColor')"
                />
              </el-form-item>
              <el-form-item label="顶栏悬停时背景色">
                <el-color-picker
                  @change="
                    onCommitColorState($event, 'headerBarHoverBackground')
                  "
                  :model-value="
                    configStore.getColorVal('headerBarHoverBackground')
                  "
                />
              </el-form-item>
              <el-form-item label="顶栏菜单激活项背景色">
                <el-color-picker
                  @change="
                    onCommitColorState($event, 'headerBarTabActiveBackground')
                  "
                  :model-value="
                    configStore.getColorVal('headerBarTabActiveBackground')
                  "
                />
              </el-form-item>
              <el-form-item
                label="顶栏菜单激活项文字色
"
              >
                <el-color-picker
                  @change="
                    onCommitColorState($event, 'headerBarTabActiveColor')
                  "
                  :model-value="
                    configStore.getColorVal('headerBarTabActiveColor')
                  "
                />
              </el-form-item>
            </div>
            <el-popconfirm
              @confirm="restoreDefault"
              title="
              确定要恢复全部配置到默认值吗？
              "
            >
              <template #reference>
                <div class="ba-center">
                  <el-button class="w80" type="info">恢复默认</el-button>
                </div>
              </template>
            </el-popconfirm>
          </div>
        </el-form>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useConfig } from "@/store/config"; //后台布局仓库
import { useNavTabs } from "@/store/navTabs";
import { useRouter } from "vue-router";
// import IconSelector from "/@/components/baInput/components/iconSelector.vue";
import { Local, Session } from "@/utils/storage";
import { useI18n } from "vue-i18n";
import DarkSwitch from "@/layouts/common/components/darkSwitch.vue";
import toggleDark from "@/utils/useDark";

interface Layout {
  showDrawer: boolean;
  shrink: boolean;
  layoutMode: string;
  mainAnimation: string;
  isDark: boolean;
  menuWidth: number;
  menuDefaultIcon: string;
  menuCollapse: boolean;
  menuUniqueOpened: boolean;
  menuShowTopBar: boolean;
  menuBackground: string[];
  menuColor: string[];
  menuActiveBackground: string[];
  menuActiveColor: string[];
  menuTopBarBackground: string[];
  headerBarTabColor: string[];
  headerBarBackground: string[];
  headerBarHoverBackground: string[];
  headerBarTabActiveBackground: string[];
  headerBarTabActiveColor: string[];
}

// const { t } = useI18n();
const configStore = useConfig();
const navTabs = useNavTabs();
const router = useRouter();

const onCommitState = (value: any, name: any) => {
  configStore.setLayout(name, value);
};

const onCommitColorState = (value: string, name: keyof Layout) => {
  const colors = configStore.layout[name] as string[];
  if (configStore.layout.isDark) {
    colors[1] = value;
  } else {
    colors[0] = value;
  }
  configStore.setLayout(name, colors);
};

const setLayoutMode = (mode: string) => {
  Session.set("beforeResizeLayout", {
    layoutMode: mode,
    menuCollapse: configStore.layout.menuCollapse,
  });
  configStore.setLayoutMode(mode);
};

// 修改默认菜单图标
const onCommitMenuDefaultIcon = (value: any, name: any) => {
  configStore.setLayout(name, value);

  const menus = navTabs.state.tabsViewRoutes;
  navTabs.setTabsViewRoutes([]);
  setTimeout(() => {
    navTabs.setTabsViewRoutes(menus as any);
  }, 200);
};

const onCloseDrawer = () => {
  configStore.setLayout("showDrawer", false);
};

const restoreDefault = () => {
  Local.remove("storeConfig_v2");
  Session.remove("beforeResizeLayout");
  router.go(0);
};
</script>

<style scoped lang="scss">
.layout-config-drawer :deep(.el-input__inner) {
  padding: 0 0 0 6px;
}
.layout-config-drawer :deep(.el-input-group__append) {
  padding: 0 10px;
}
.layout-config-drawer :deep(.el-drawer__header) {
  margin-bottom: 0 !important;
}
.layout-config-drawer :deep(.el-drawer__body) {
  padding: 0;
}
.layout-mode-styles-box {
  padding: 20px;
}
.layout-mode-box-style-row {
  margin-bottom: 15px;
}
.layout-mode-style {
  position: relative;
  height: 100px;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-small);
  &:hover,
  &.active {
    border: 1px solid var(--el-color-primary);
  }
  .layout-mode-style-name {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-color-primary-light-5);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    border: 1px solid var(--el-color-primary-light-3);
  }
  .layout-mode-style-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  &.default {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-aside {
      width: 18%;
      height: 90%;
      background-color: var(--el-border-color-lighter);
    }
    .layout-mode-style-container-box {
      width: 68%;
      height: 90%;
      margin-left: 4%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color-lighter);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 85%;
        background-color: var(--el-border-color-extra-light);
        margin-top: 5%;
      }
    }
  }
  &.classic {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-aside {
      width: 18%;
      height: 100%;
      background-color: var(--el-border-color-lighter);
    }
    .layout-mode-style-container-box {
      width: 82%;
      height: 100%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 90%;
        background-color: var(--el-border-color-extra-light);
      }
    }
  }
  &.streamline {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-container-box {
      width: 100%;
      height: 100%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 90%;
        background-color: var(--el-border-color-extra-light);
      }
    }
  }
}
.w80 {
  width: 90%;
}
</style>
